<script setup lang="ts">
import { TaskEntity, Pagination } from '~/composables/api/task'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

const props = withDefaults(
  defineProps<{
    list: TaskEntity[]
    pagination: Pagination
  }>(),
  {
    list: () => [],
    pagination: () => ({ pageSize: 10, pageNum: 1, total: 0 }),
  },
)
const $emit = defineEmits(['refresh'])

const currentPage = computed({
  get: () => props.pagination.pageNum,
  set: (value) => {
    $emit('refresh', { pageNum: value })
  },
})

const handleList = ref([
  {
    icon: 'i-carbon-thumbs-up',
    checkedIcon: 'i-carbon-thumbs-up-filled',
    type: 'liked',
    fieldName: 'likedNum',
    checkedFieldName: 'isLiked',
  },
  {
    icon: 'i-carbon-ibm-watson-assistant',
    type: 'comment',
    fieldName: 'commentNum',
  },
  {
    icon: 'i-carbon-star',
    checkedIcon: 'i-carbon-star-filled',
    type: 'collected',
    fieldName: 'collectedNum',
    checkedFieldName: 'isCollected',
  },
])

const taskList: ComputedRef<any[]> = computed(() => {
  return props.list
})

const handleClick = async (type: string, id: string|number) => {
  if (type === 'liked') {
    await service.task.likeTask(id)
    $emit('refresh')
  } else if (type === 'collected') {
    await service.task.collectTask(id)
    $emit('refresh')
  }
}

const router = useRouter()
const handelGoDetail = (id: number) => {
  router.push(`/main/task/${id}`)
}
</script>

<template>
  <div>
    <div v-if="pagination.total>0">
      <div
        v-for="item in taskList"
        :key="item.id"
        class="mb-3 cursor-pointer"
        @click="handelGoDetail(item.id as number)"
      >
        <div class="flex gap-3">
          <el-avatar :src="item.userAvatar" />
          <div class="text-sm font-semibold">
            <div>{{ item.createdName }}</div>
            <div>{{ item.title }}</div>
          </div>
          <div class="text-xs"></div>
          <div>vip</div>
          {{ dayjs(item.createdTime).format('YYYY-MM-DD HH:MM:ss') }}
        </div>
        <div class="mt-2">
          {{ item.description }}
        </div>
        <div class="mt-2">
          {{ item.content }}
        </div>
        <div class="flex gap-1 mt-3">
          <el-button type="primary" link>#学习打卡</el-button>
          <el-button type="primary" link>#资源</el-button>
          <el-button type="primary" link>#面试题</el-button>
        </div>
        <!-- 评论 -->
        <!-- <div v-if="!!item.taskCommentVO">
          <div>{{ item.taskCommentVO.content }}</div>
        </div> -->
        <div class="mt-4 flex items-center justify-between">
          <div class="flex items-center gap-8">
            <div
              class="flex items-stretch gap-0.5 cursor-pointer text-sm"
              hover:text-gray-400
              v-for="handle in handleList"
              :key="handle.icon"
              @click.stop="handleClick(handle.type, item.id!)"
            >
              <div
                v-if="item[handle.checkedFieldName!]"
                :class="handle.checkedIcon"
                :style="{ color: '#409eff' }"
              ></div>
              <div v-else :class="handle.icon"></div>
              <div>{{ item[handle.fieldName] || 0 }}</div>
            </div>
          </div>
          <div class="right">
            <slot :id="item.id"></slot>
          </div>
        </div>
      </div>
      <div class="mt-2 flex justify-end">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="pagination.total"
          v-model:current-page="currentPage"
        />
      </div>
    </div>
    <NoData v-else></NoData>
  </div>
</template>
